<template>
  <div class="pc-view-tx">
    <div class="head flex-between">
      <h1>{{$t('home.txTitle')}}</h1>
    </div>
    <div class="tx-area">
      <div class="tx-item flex-between" v-for="(item,index) in txList" :key="index">
        <div class="left flex-left-between-stright">
          <p>
            {{$t('home.txHash')}}：
            <router-link
              :to="{path:'/tradeHash',query:{hash:item.hash}}"
              class="light hash"
            >{{item.hash|filterHash(8)}}</router-link>
          </p>
          <p class="grey">
            <count :time="item.block_time"></count>
          </p>
        </div>
        <div class="middle flex-left-between-stright">
          <p>
            {{$t('home.sender')}}：
            <router-link
              :to="{path:'/address',query:{address:item.from}}"
              class="light hash"
            >{{item.from|filterHash(8)}}</router-link>
          </p>
          <p>
            {{$t('home.receiver')}}：
            <router-link
              :to="{path:'/address',query:{address:item.to}}"
              class="light hash"
            >{{item.to|filterHash(8)}}</router-link>
          </p>
        </div>
        <div class="right flex-left-between-stright">
          <p class="grey">{{$t('home.txValue')}}</p>
          <p>{{item|TradeValue}}</p>
        </div>
      </div>
    </div>
    <div class="footer">
      <router-link to="/tradelist" class="link">{{$t('home.viewAll')}}</router-link>
    </div>
  </div>
</template>
<script>
import txBase from "@/mixins/Home/txList.js";
import Count from "@/components/Count.vue";
export default {
  mixins: [txBase],
  components: {
    Count
  }
};
</script>

<style lang="scss" scoped>
.pc-view-tx {
  width: 585px;
  display: inline-block;
  background: $white;
  box-shadow: 4px 5px 17px 0px rgba(245, 245, 245, 0.8);
  .head {
    height: 45px;
    padding-left: 20px;
    border-bottom: 1px solid $border;
    h1 {
      font-size: 15px;
      font-family: PingFangSC-Medium;
      font-weight: 600;
      color: $black;
      line-height: 22px;
    }
  }
  .footer {
    height: 54px;
    padding: 12px;
    .link {
      display: inline-block;
      width: 100%;
      height: 100%;
      line-height: 30px;
      text-align: center;
      // color: $orange;
      color: #3498db;
      background: rgba(52, 152, 219, 0.1);
      border-radius: 2px;
      transition: 0.3s;
    }
    .link:hover {
      color: #fff;
      background: #3498db;
      box-shadow: 0 0 20px rgba(52, 152, 219, 0.2);
    }
  }
  .tx-area {
    // margin-top: 25px;
    height: 542px;
    width: 100%;
    .tx-item {
      width: 100%;
      height: 90px;
      padding: 20px 40px 20px 20px;
      border-bottom: 1px solid $border;
      color: $black;
      // font-size: 14px;
      .left,
      .middle,
      .right {
        height: 100%;
      }
      .left {
        min-width: 185px;
      }
      .middle {
        min-width: 185px;
      }
      .right {
        min-width: 110px;
        text-align: center;
      }
      .hash {
        cursor: pointer;
      }
    }
    .grey {
      color: $grey;
    }
  }
}
</style>
